<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="df fclonum">
    <header>
        <img class="iconfont icon-leftarrow" src="#" alt="">
        个人资料
    </header>
    <main class="flex">
        <!-- 头像 -->
        <div class="userpic">
            <span>更换头像</span>
            <img class="pic compro"></div>

        <!-- 昵称 -->
        <div class="weui-cell weui-cell_active">
            <div class="weui-cell__hd"><label class="weui-label">昵称</label></div>
            <div class="weui-cell__bd">
                <input id="js_input" class="weui-input accountuser" placeholder="用户名"/>
            </div>
        </div>
        <!-- 性别 -->
        <div class="weui-cell weui-cell_active weui-cell_access" id="showGenderPicker">
            <div class="weui-cell__bd">性别</div>
            <div class="weui-cell__ft" id="gender">未选择</div>
        </div>

        <!-- 生日 -->
        <div class="weui-cell weui-cell_active weui-cell_access" id="showBirthdayPicker">
            <div class="weui-cell__bd">生日</div>
            <div class="weui-cell__ft" id="birthday">未选择</div>
        </div>

        <!-- 所在省份 -->
        <div class="weui-cell weui-cell_active weui-cell_access" id="showProvincePicker">
            <div class="weui-cell__bd">所在省份</div>
            <div class="weui-cell__ft" id="province">未选择</div>
        </div>

        <!-- 所在城市 -->
        <div class="weui-cell weui-cell_active weui-cell_access" id="showCityPicker">
            <div class="weui-cell__bd">所在城市</div>
            <div class="weui-cell__ft" id="city">未选择</div>
        </div>
        <!-- 个性签名 -->
        <div class="weui-cell weui-cell_active weui-cell_access" id="showDatePicker">
            <div class="weui-cell__bd">个性签名</div>
        </div>

        <div class="weui-cell ">
            <div class="weui-cell__bd">
                <textarea id="textArea" maxlength="120" class="weui-textarea text" placeholder="请描述你所发生的问题"
                    rows="3"></textarea>
                <div class="weui-textarea-counter"><span class="num">0</span>/120</div>
            </div>
        </div>
        <button type="button" id="btn" class="cfff">保存信息</button>
    </main>
</body>

</html>